<template>
  <div class="channel-menu-page">
    <router-link to="" class="item-box active">
      <div class="icon"></div>
      <div class="text">研究报告</div>
    </router-link>
    <router-link to="" class="item-box">
      <div class="icon"></div>
      <div class="text">知识图谱</div>
    </router-link>
    <router-link to="" class="item-box">
      <div class="icon"></div>
      <div class="text">行业标准</div>
    </router-link>
    <router-link to="" class="item-box">
      <div class="icon"></div>
      <div class="text">营销知识</div>
    </router-link>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
const props = defineProps(["index"]);
const activeIndex = ref(1);

onMounted(() => {
  activeIndex.value = props.index;
});
</script>
<style lang="scss" scoped>
.channel-menu-page {
  width: 80px;
  display: flex;
  flex-direction: column;
  .item-box {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000;
    .icon {
      background-repeat: no-repeat;
      background-size: 32px;
      width: 32px;
      height: 32px;
      background-position: center;
    }
    .text {
      margin-top: 8px;
      line-height: 1.2;
      color: #666;
    }
    &:nth-child(1) {
      .icon {
        background-image: url("../../assets/knowledge/icon-1.png");
      }
    }
    &:nth-child(2) {
      .icon {
        background-image: url("../../assets/knowledge/icon-2.png");
      }
    }
    &:nth-child(3) {
      .icon {
        background-image: url("../../assets/knowledge/icon-3.png");
      }
    }
    &:nth-child(4) {
      .icon {
        background-image: url("../../assets/knowledge/icon-4.png");
      }
    }
    &.active,
    &:hover {
      background-color: #e3edff;
      .text {
        color: #2171fe;
      }
      &:nth-child(1) {
        .icon {
          background-image: url("../../assets/knowledge/icon-1-on.png");
        }
      }
      &:nth-child(2) {
        .icon {
          background-image: url("../../assets/knowledge/icon-2-on.png");
        }
      }

      &:nth-child(3) {
        .icon {
          background-image: url("../../assets/knowledge/icon-3-on.png");
        }
      }
      &:nth-child(4) {
        .icon {
          background-image: url("../../assets/knowledge/icon-4-on.png");
        }
      }
    }
  }
}
</style>
